<template>
    <div class="main">
        <div class="login-body">
            <div class="pic"></div>
            <div class="form">
                <h1>云逸轩酒店预约系统</h1>
                <el-form style="padding: 10px" :model="lfm" ref="lfRef" :rules="rules">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="用户名:" prop="adminName" :label-width="80" >
                                <el-input v-model="lfm.adminName" placeholder="请输入用户名Alice" style="height: 40px;"
                                    autocomplete="off" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="密码:" prop="password" :label-width="80">
                                <el-input type="password" v-model="lfm.password" show-password placeholder="请输入密码123456"
                                    style="height: 40px" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="验证码:" prop="captcha" :label-width="80">
                                <el-input placeholder="请输入验证码" v-model="lfm.captcha" maxlength="5" minLength="5"
                                    style="height: 40px;" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <img class="captcha" :src="captchaUrl" style="height: 40px;" @click="refresh">
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-button type="primary" class="login-btn" @click="submitLogin">登&nbsp;&nbsp;录</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="mask"></div>
        <div class="copyright">
            <h2>&copy;云逸轩酒店预约系统</h2>
        </div>
    </div>
</template>

<style scoped>
.main {
    height: 100%;
    background: url("@/assets/login.jpg") no-repeat center center/cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main>.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
}

.login-body {
    width: 700px;
    height: 400px;
    background-color: #fff;
    margin-left: 600px;
    display: flex;
    flex-direction: row;
    z-index: 1000;
}

.login-body>.pic {
    width: 180px;
    
    background: url("@/assets/logo.jpg") no-repeat center center/cover;
}

.login-body>.form {
    flex-grow: 1;
}

.login-body>.form>h1 {
    font-size: 24px;
    color: #333;
    text-align: center
}

.copyright {
    position: fixed;
    bottom: 100px;
    color: white;
    font-size: 12px;
    margin-left: 700px;
}

.login-btn {
    width: 80%;
    height: 50px;
    background-color: #16b777;
    color: #fff;
    font-size: 18px;
    margin-top: 40px;
    margin-left: 60px;
}

.captcha {
    cursor: pointer;
}
</style>

<script setup>
import { ref } from 'vue';
import { login } from "@/api/adminloginApi";
import { save as saveToken } from "@/api/jwtApi";
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

//获取路由转发器
const router = useRouter();

//登录数据模型
const loginFormModel = ref({
    adminName: "",
    password: "",
    captcha: ""
});
const lfm = loginFormModel;

let lfRef;//表单实例
//提交登录
async function submitLogin() {
    lfRef.validate(async success => {
        if (success) {
            sessionStorage.setItem("username",loginFormModel.value.adminName);
            let resp = await login(lfm.value);
            //console.log(resp);
            if (resp.success) {
                saveToken(resp.jwt);

                //转发到另一个路由
                router.push("/main/ear");
            } else {
                ElMessage({
                    message: resp.error || "登录失败",
                    type: "error"
                });
            }
        }
    });
}

const captchaUrl = ref("/api/admins/captcha");

//刷新验证码
function refresh() {
    captchaUrl.value = "/api/admins/captcha?id=" + Math.random();
}

const rules = ref({
    adminName: [
        { required: true, message: "用户名不可为空" }
    ],
    password: [
        { required: true, message: "密码不可为空" }
    ],
    captcha: [
        { required: true, message: "验证码不可为空" },
        { min: 5, max: 5, message: "验证码只能是5位" }
    ]
});

</script>